<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      width="50%"
      @close="close"
      @open="open"
    >
      <el-row>
        <el-col :span="6"
          >【题型】: {{ preViewData.questionType | questions }}</el-col
        >
        <el-col :span="6">【编号】: {{ preViewData.id }}</el-col>
        <el-col :span="6"
          >【难度】: {{ preViewData.difficulty | boring }}</el-col
        >
        <el-col :span="6">【标签】: {{ preViewData.tags }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">【学科】: {{ preViewData.subject }}</el-col>
        <el-col :span="6">【目录】: {{ preViewData.catalogID }}</el-col>
        <el-col :span="6">【方向】: {{ preViewData.direction }}</el-col>
      </el-row>
      <hr />
      【题干】:
      <div v-html="preViewData.question"></div>
      <!-- 如果难度类型为3则不显示 不为3 则显示 1 2 -->
      <div v-if="preViewData.questionType !== '3'">
        <div>
          {{ preViewData.questionType | questions }}
          选项：（以下选中的选项为正确答案）
        </div>
        <!-- 这边判断是不是为1 如果为1的话是单选框，单选框显示，默认数据需要指定一个label -->
        <!-- 为2的话显示复选框，根据后台返回的数据0false 1 true 默认回显正确数据 -->
        <div
          v-for="item in preViewData.options"
          :key="item.code"
          style="padding: 10px 0"
        >
          <el-radio
            v-if="preViewData.questionType === '1'"
            :value="item.isRight"
            :label="1"
            >{{ item.title }}</el-radio
          >
          <el-checkbox
            v-if="preViewData.questionType === '2'"
            :value="item.isRight ? true : false"
            >{{ item.title }}</el-checkbox
          >
        </div>
      </div>
      <hr />
      【参考答案】:
      <el-button type="danger" size="mini" @click="preview"
        >视频答案预览</el-button
      >
      <div class="video" v-if="play">
        <video
          ref="video"
          muted
          autoplay
          :src="preViewData.videoURL"
          controls
        ></video>
      </div>
      <hr />
      【答案解析】：
      <div style="display: inline-block" v-html="preViewData.answer"></div>
      <hr />
      【题目备注】：<div style="display: inline-block">{{preViewData.remarks}}</div>
      <span slot="footer" class="dialog-footer">
        <!-- 沙发 -->
        <el-button @click="close" type="primary">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '../../api/hmmm/constants'
import { detail } from '../../api/hmmm/questions'
export default {
  props: {
    // 弹窗
    showDialog: {
      type: Boolean,
      default: false
    },
    // 点击传过来的每一条数据
    preViewDatas: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      preViewData: {},
      play: false
    }
  },
  methods: {
    // 关闭弹框
    close () {
      this.$emit('update:showDialog', false)
      this.play = false
    },
    // 获取详情列表
    async getQuestionDetail () {
      // console.log(this.preViewData.id)
      // 根据id 返回基础数据列表详情  这个数据里面有返回的单选框复选框数据
      const res = await detail({ id: this.preViewDatas.id })
      console.log(res)
      this.preViewData = res.data
    },
    // 这边是弹出框 之后在请求数据，饿了么里面内置的方法，如果一进来获取数据，created 里面只会获取一次，
    open () {
      this.getQuestionDetail()
    },
    // 点击显示视频
    preview () {
      this.play = true
    }
  },
  // 枚举数据的处理
  filters: {
    // 题型的设置，可以直接写在行内或者自定义一个过滤器
    questions (value) {
      if (value) {
        return questionType.find((item) => item.value === +value).label + '题'
      }
    },
    // 难度
    boring (value) {
      if (value) return difficulty.find((item) => item.value === +value).label
    }
  }
}
</script>

<style scoped lang='scss'>
.el-col {
  padding: 10px 0;
}
.video {
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
